import { useEffect, useState } from 'react';
import { Button, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import axios from '../../api/request';

function List() {
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
    }

    const [data,setData]=useState([])
    const listData=async ()=>{
        const res = await axios.get('/article/list')
        setData(res.data.rows)
    };
    useEffect(()=>{
        listData()
    },[])
    

    const columns: TableProps<DataType>['columns'] = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '文章内容',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
        },
        {
            title: '按钮',
            key: 'action',
            render: (_,) => (
                <Space size="middle">
                    <Button>增加</Button>
                    <Button>删除</Button>
                </Space>
            ),
        },
    ];

    return (
        <div>
            <Table<DataType> columns={columns} dataSource={data} />
        </div>
    );
}

export default List;
